<template>
  <div id="line1">
    <div
      v-if="reload"
      ref="line1"
      :x_data="x_data"
      :y1_data="y1_data"
      :y2_data="y2_data"
      :y3_data="y3_data"
      :y4_data="y4_data"
      :flow_chartxx="flow_chartxx"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    x_data: Array | Object,
    y1_data: Array | Object,
    y2_data: Array | Object,
    y3_data: Array | Object,
    y4_data: Array | Object,
    flow_chartxx: Array | Object,
    yname: String,
    yname1: String,
    name1: String,
    name2: String,
    name3: String,
    name4: String,
    size: String | Number,
    grid_line: String,
    line_color: String,
    line_style: String,
    font_color: String,
    format_0: String,
    formatter: String | Number,
    yAxisIndex: String | Number
  },
  components: {},
  data() {
    return {
      reload: true,
      a: '1'
    };
  },
  computed: {
    listen_change() {
      const { x_data, y1_data, y2_data, y3_data, y4_data, flow_chartxx } = this;
      return {
        x_data,
        y1_data,
        y2_data,
        y3_data,
        y4_data,
        flow_chartxx
      };
    }
  },
  watch: {},
  created() {
    this.$watch('listen_change', function (newValue, oldValue) {
      this.draw();
    });
  },
  mounted() {
    this.draw();
  },

  methods: {
    draw() {
      let that = this;
      let my_chart = that.$echarts.init(that.$refs.line1);
      let option = {
        tooltip: {
          padding: 8,
          axisPointer: {
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          },
          trigger: 'axis',
          formatter: function (params, index, i) {
            var result = '';
            var result1 = '';
            params.forEach(item => {
              if (that.flow_chartxx) {
                var date = new Date(that.flow_chartxx[item.dataIndex] * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var year = date.getFullYear(),
                  month = ('0' + (date.getMonth() + 1)).slice(-2),
                  sdate = ('0' + date.getDate()).slice(-2),
                  hour = ('0' + date.getHours()).slice(-2),
                  minute = ('0' + date.getMinutes()).slice(-2),
                  second = ('0' + date.getSeconds()).slice(-2);
                // 拼接
                result1 =
                  year + '-' + month + '-' + sdate + ' ' + hour + ':' + minute + ':' + second;
              }

              if (item.seriesName == '人均看播时长') {
                var time = parseInt(item.value) + '秒';
                if (parseInt(item.value) > 60) {
                  var second = parseInt(item.value) % 60;
                  var min = parseInt(item.value / 60);
                  time = min + '分' + second + '秒';
                  if (min > 60) {
                    min = parseInt(item.value / 60) % 60;
                    var hour = parseInt(parseInt(item.value / 60) / 60);
                    time = hour + '小时' + min + '分' + second + '秒';

                    if (hour > 24) {
                      hour = parseInt(parseInt(item.value / 60) / 60) % 24;
                      var day = parseInt(parseInt(parseInt(item.value / 60) / 60) / 24);
                      time = day + '天' + hour + '小时' + min + '分' + second + '秒';
                    }
                  }
                }
                result += item.marker + item.seriesName + '：' + time;
              } else {
                result += item.marker + item.seriesName + '：' + item.value + '</br>';
              }

              // if (item.value > 99999999) item.value = (item.value / 100000000).toFixed(1) + "亿";
              // else if (item.value > 9999) item.value = (item.value / 10000).toFixed(1) + "w";
              // else if (item.value< -99999999) item.value= (item.value / 100000000).toFixed(1) + "亿";
              // else if (item.value< -9999) item.value= (item.value / 10000).toFixed(1) + "w";
            });
            return result1 + '</br>' + result;
          }
        },

        grid: {
          top: '15%', // 组件离容器上侧的距离,百分比字符串或整型数字
          left: '13%', // 组件离容器左侧的距离,百分比字符串或整型数字
          right: '15%',
          bottom: '15%',
          containLabel: false //grid 区域是否包含坐标轴的刻度标签，
          // top: "15%", // 组件离容器上侧的距离,百分比字符串或整型数字
          // left: "5%", // 组件离容器左侧的距离,百分比字符串或整型数字
          // right: "15%",
          // bottom: "3%",
          // containLabel: true, //grid 区域是否包含坐标轴的刻度标签，
        },
        xAxis: {
          type: 'category',
          //坐标轴两边留白
          boundaryGap: false,
          data: that.x_data,
          //设置网格线颜色
          splitLine: {
            show: that.grid_line === 'false' ? false : true,
            lineStyle: {
              color: 'rgba(195,202,223,.3)',
              width: 1,
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          },
          // x轴样式
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'rgba(195,202,223,.3)', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          // x轴字体样式
          axisLabel: {
            show: true,
            margin: 12,
            // align: "auto",
            textStyle: {
              // color:that.font_color ,
              color: 'rgba(195,202,223,.5)',
              // color: that.font_color ? that.font_color : "#555555",
              // fontFamily: "DINAlternate-Bold",
              fontSize: 12
            }
          }
        },
        yAxis: [
          {
            name: this.yname ? this.yname : '',
            type: 'value',
            min: that.line_style ? 100 : null,
            minInterval: 1,
            // 设置网格线颜色
            splitLine: {
              show: true,
              lineStyle: {
                // color: ["#abe7ff"],
                color: ['rgba(171,231,255,0.1)'],
                width: 1,
                type: 'solid',
                option: 0.7
              }
            },
            axisLabel: {
              show: true,
              margin: 10,
              textStyle: {
                color: 'rgba(195,202,223,.5)',
                // color: that.font_color ? that.font_color : "#555555",
                // fontFamily: "DINAlternate-Bold",
                fontSize: 12
              },
              formatter: function (value) {
                if (that.formatter == 1 || that.formatter == 3) {
                  return that.format_num(value);
                } else if (that.formatter == 2) {
                  return value * 100 + '%';
                }
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                // color: '#666', //左边线的颜色
                color: 'rgba(195,202,223,.5)', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            }
          },
          {
            name: this.yname1 ? this.yname1 : '',
            type: 'value',
            min: that.line_style ? 100 : null,
            minInterval: 1,
            //设置网格线颜色
            splitLine: {
              show: that.grid_line === 'false' ? false : true,
              lineStyle: {
                color: ['#e5e5e5'],
                width: 1,
                type: 'solid'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              margin: 14,
              show: true,
              textStyle: {
                // color: that.font_color ? that.font_color : "#fff",
                // fontFamily: "DINAlternate-Bold",
                color: 'rgba(195,202,223,.5)',
                fontSize: 12
              },
              formatter: function (value) {
                if (that.formatter == 1 || that.formatter == 3) {
                  return that.format_num(value);
                } else if (that.formatter == 2) {
                  return value * 100 + '%';
                }
              }
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'rgba(195,202,223,.5)', //左边线的颜色
                // color: that.line_color, //左边线的颜色
                width: '1' //坐标线的宽度
              }
            }
          }
        ],
        legend: {
          data: [this.name1, this.name2, this.name3, this.name4],
          padding: [12, 0, 0, 0],
          itemGap: 20,
          //  pageButtonItemGap : 115,
          textStyle: {
            color: '#c3cadf'
            // rich: {
            //   b: { color: "red" },
            // },
          },
          icon: 'rect',
          // rich: {
          //   b: { color: "red" },
          // },
          itemHeight: 2, //修改icon图形大小
          itemWidth: 14 //修改icon图形大小
        },
        series: [
          {
            //  showSymbol: true,
            name: that.name1,
            data: that.y1_data,
            type: 'line',
            // animation: true,
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 0, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(62,134,233,.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(64,141,246,.3)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: '#4f99ff', //改变折线点的颜色
                shadowBlur: 16,
                shadowColor: 'rgba(253,127,44,.3)',
                lineStyle: {
                  type: that.line_style ? that.line_style : 'solid', //'dotted'虚线 'solid'实线
                  color: '#4f99ff', //改变折线颜色
                  width: 2
                }
              }
            },
            yAxisIndex: 0
          },
          {
            name: that.name2,
            data: that.y2_data,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 0, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(93,71,76,.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(93,71,76,.3)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: '#ee843f', //改变折线点的颜色
                shadowBlur: 16,
                shadowColor: '#1779ff',
                lineStyle: {
                  type: that.line_style ? that.line_style : 'solid', //'dotted'虚线 'solid'实线
                  color: '#ee843f', //改变折线颜色
                  width: 2
                }
              }
            },
            yAxisIndex: this.yAxisIndex ? this.yAxisIndex : 0
          },
          {
            name: that.name3,
            data: that.y3_data,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 0, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(46,76,105,.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(46,76,105,.3)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: '#3cb2c0', //改变折线点的颜色
                shadowBlur: 16,
                shadowColor: '#06f0ab',
                lineStyle: {
                  type: that.line_style ? that.line_style : 'solid', //'dotted'虚线 'solid'实线
                  color: '#3cb2c0', //改变折线颜色
                  width: 2
                }
              }
            },
            yAxisIndex: 1
          },
          {
            name: that.name4,
            data: that.y4_data,
            type: 'line',
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 0, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#4b5367'
                  },
                  {
                    offset: 1,
                    color: '#273151'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: '#f3ac62', //改变折线点的颜色
                shadowBlur: 16,
                shadowColor: '#06f0ab',
                lineStyle: {
                  type: that.line_style ? that.line_style : 'solid', //'dotted'虚线 'solid'实线
                  color: '#f3ac62', //改变折线颜色
                  width: 2
                }
              }
            },
            yAxisIndex: 0
          }
        ]
      };
      my_chart.clear(); //清除之前渲染结果，重新渲染
      my_chart.setOption(option);

      let resizeFn = function () {
        my_chart.resize();
      } 
      window.addEventListener('resize',resizeFn);
      this.$once('hook:beforeDestroy', () => {
        my_chart.dispose();
        my_chart = null;
        window.removeEventListener('resize',resizeFn);
      });
    }
  }
};
</script>
<style lang='less' scoped>
#line1 {
  div {
    width: 100%;
    height: 100%;
  }
}
</style>